<template>

  <el-card>

    <el-form ref="formBook" :rules="rulesMemberFamily" :model="formMemberFamily" label-width="250px" >
      <el-form-item label="头像" >
        <SinglePictureUploadScreenshot ref="memberFamilyIcoImages"></SinglePictureUploadScreenshot>
      </el-form-item>


      <el-divider content-position="left">
        <el-tag size="mini" effect="plain">基础信息</el-tag>
      </el-divider>

      <el-row>
        <el-col :span="10">

          <el-form-item prop="userName" >
            <span slot="label">
              <el-tooltip content="有时会碰到一些不知道姓名的亲戚，故而姓名可以不填" placement="top" style="color: #E6A23C">
                <i class="el-icon-question"></i>
              </el-tooltip>
              姓名
            </span>

            <el-input v-model.trim="formMemberFamily.userName"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="昵称/外号" prop="nickname" >
            <el-input v-model.trim="formMemberFamily.nickname"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item prop="phone" >
        <span slot="label">
          <el-tooltip content="多个手机号码可以逗号分隔" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          手机号码
        </span>
        <el-input v-model.trim="formMemberFamily.phone"></el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="phone" >
        <el-input v-model.trim="formMemberFamily.idCard"></el-input>
      </el-form-item>

      <el-form-item >
        <span slot="label">
          <el-tooltip content="不填则从身份证上获取，输入则以输入的为准，防止实际出生年月与身份证不符的情况，该数据只参与年龄计算，与生日无关" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          真实出生年月类型
        </span>

        <el-radio-group v-model="formMemberFamily.lunarCalendar">
          <el-radio :label="1">阴历</el-radio>
          <el-radio :label="2">阳历</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row>
        <el-col :span="10">

          <el-form-item label="真实出生年月" prop="birth" >
            <span slot="label">
              <el-tooltip content="记录实际的出生年月,只与年龄有关系，与其他参数无关" placement="top" style="color: #E6A23C">
                <i class="el-icon-question"></i>
              </el-tooltip>
              真实出生年月
            </span>
            <el-date-picker
              v-model="formMemberFamily.birth"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placement="bottom-start"
              :picker-options="pickerOptions"
              placeholder="选择出生年月">
            </el-date-picker>
          </el-form-item>

        </el-col>
        <el-col :span="10">

        </el-col>
      </el-row>


      <el-form-item >
         <span slot="label">
          <el-tooltip content="不填或输入身份证会自动从身份证上获取，并且以身份证为主" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          性别
        </span>

        <el-radio-group v-model="formMemberFamily.sex">
          <el-radio :label="0">女性</el-radio>
          <el-radio :label="1">男性</el-radio>
          <el-radio :label="9">未知</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否开启生日提醒">
        <el-radio-group v-model="formMemberFamily.birthdayTips">
          <el-radio :label="1">不开启</el-radio>
          <el-radio :label="2">开启生日提醒</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-row>
        <el-col :span="10">

          <el-form-item prop="birth" >
            <span slot="label">
              <el-tooltip content="请输入阴历生日，中国主要使用阴历生日,与上面的出生年月类型无关，系统将依据该数据进行生日提醒，防止出现不知道对方具体出生年月但需要提醒的情况" placement="top" style="color: #E6A23C">
                <i class="el-icon-question"></i>
              </el-tooltip>
              生日提醒时间[阴历]
            </span>
            <el-date-picker
              v-model="formMemberFamily.birthdayTime"
              type="date"
              placement="bottom-start"
              placeholder="选择日期"
              format="MM-dd"
              value-format="MM-dd"
              :editable="false"
            ></el-date-picker>
          </el-form-item>

        </el-col>
        <el-col :span="10">

        </el-col>
      </el-row>

      <el-form-item prop="birth" >
       <span slot="label">
          <el-tooltip content="生日开始之前多久提醒，比如输入0当天才提醒，30则提前30天提醒" placement="top" style="color: #E6A23C">
            <i class="el-icon-question"></i>
          </el-tooltip>
          生日多久之前提醒
        </span>
       <el-input-number v-model="formMemberFamily.beforeBirthday" :min="0" :max="30" label="生日多久之前提醒"></el-input-number>
      </el-form-item>




      <el-divider content-position="left">
        <el-tag size="mini" effect="plain">其他信息</el-tag>
      </el-divider>

      <el-form-item label="外貌特征" prop="features" >
        <el-input v-model.trim="formMemberFamily.features" type="textarea"></el-input>
      </el-form-item>

      <el-row>
        <el-col :span="10">

          <el-form-item label="公司名称" prop="companyName" >
            <el-input v-model.trim="formMemberFamily.companyName"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="公司地址" prop="companyAddress" >
            <el-input v-model.trim="formMemberFamily.companyAddress"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item label="职业" prop="occupation" >
            <el-input v-model.trim="formMemberFamily.occupation"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="工作行业" prop="trade" >
            <el-input v-model.trim="formMemberFamily.trade"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item label="最高学历毕业学校" prop="graduationSchool" >
            <el-input v-model.trim="formMemberFamily.graduationSchool"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="学历" prop="education" >
            <el-input v-model.trim="formMemberFamily.education"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">

          <el-form-item label="车牌" prop="licensePlate" >
            <el-input v-model.trim="formMemberFamily.licensePlate"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="10">

          <el-form-item label="结婚时间" prop="marryTime" >
            <el-input v-model.trim="formMemberFamily.marryTime"></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item label="离世时间" prop="deathTime" >
        <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" placement="bottom-start" type="date" placeholder="选择日期" v-model="formMemberFamily.deathTime" style="width: 100%;"></el-date-picker>
      </el-form-item>

      <el-form-item label="健康情况" prop="health" >
        <el-input v-model.trim="formMemberFamily.health" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="居住地址" prop="residentialAddress" >
        <el-input v-model.trim="formMemberFamily.residentialAddress" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="老家地址" prop="residentialAddressHometown" >
        <el-input v-model.trim="formMemberFamily.residentialAddressHometown" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort" >
        <el-slider
          :marks="marks" :min="0" :max="100" :step="0.1"
          v-model="formMemberFamily.sort" show-input>
        </el-slider>
      </el-form-item>


      <el-form-item label="备注" prop="remarks" >
        <el-input v-model.trim="formMemberFamily.remarks" type="textarea"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button  type="warning" @click="updMemberFamily" >保存</el-button>
      </el-form-item>

    </el-form>


  </el-card>

</template>

<script>

  import http from '@/utils/http'
  import {clearInvalid} from "../../utils/utils"
  import SinglePictureUploadScreenshot from '@/components/common/SinglePictureUploadScreenshot.vue';

  export default {
    name: "UserSaveUpd",
    components: {
      SinglePictureUploadScreenshot,
    },
    data(){
      return {
        // 日期带快捷选项
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        // 排序的默认值
        marks: {
          10: '靠前',
          70: '靠后',
        },
        // 人员关系，连接类型
        connectionTypeList: [],
        // 要提交的数据
        formMemberFamily: {
          id: null,
          userName: null,
          nickname: null,
          features: null,
          phone: null,
          idCard: null,
          sex: null,
          lunarCalendar: null,
          birth: null,
          birthdayTime: null,
          beforeBirthday: null,
          birthdayTips: null,
          icoPath: null,
          occupation: null,
          companyName: null,
          companyAddress: null,
          trade: null,
          graduationSchool: null,
          education: null,
          residentialAddress: null,
          residentialAddressHometown: null,
          marryTime: null,
          deathTime: null,
          tombId: null,
          licensePlate: null,
          remarks: null,
          health: null,
          sort: 99,
          // 关系部分

        },
        // 校验规则
        rulesMemberFamily: {

        },
      }
    },
    methods: {
      /**
       * 更新家庭成员信息
       */
      updMemberFamily(){
        let formData = new FormData()
        clearInvalid(this.formMemberFamily)
        this.appendPram(formData)
        // 处理图片
        let uploadList = this.$refs.memberFamilyIcoImages.upload.fileList
        uploadList.forEach((file) => {
          // 更新的时候，如果没有图片不做处理，这个时候的图片是自己放进去的，但没有 file.raw 数据
          if (file.raw){
            formData.append('file', file.raw)
          }
        });
        http.postFileForm("/user/updateUser", formData).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.$message.success("更新成功");
          // this.$emit('saveUpdMemberFamilyCallback', null)
          // 关闭弹出框
          this.init()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 拼接参数
       * @formData 提交的数据
       */
      appendPram(formData){
        for (let key in this.formMemberFamily){
          if (this.formMemberFamily[key]){
            formData.append(key, this.formMemberFamily[key])
          }
        }
      },
      /**
       * 初始化弹出框的数据
       */
      initMemberFamily(){
        this.formMemberFamily = {
          id: null,
          userName: null,
          nickname: null,
          features: null,
          phone: null,
          idCard: null,
          sex: null,
          lunarCalendar: null,
          birth: null,
          birthType: null,
          beforeBirthday: null,
          birthdayTips: null,
          icoPath: null,
          occupation: null,
          companyName: null,
          companyAddress: null,
          trade: null,
          graduationSchool: null,
          education: null,
          residentialAddress: null,
          residentialAddressHometown: null,
          marryTime: null,
          deathTime: null,
          tombId: null,
          licensePlate: null,
          remarks: null,
          health: null,
          sort: 99,
        }
      },
      /**
       * 初始化
       */
      init(){
        // this.initMemberFamily()
        http.post("/user/getMemberFamilyById", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // this.initMemberFamily()
          this.formMemberFamily = res.data
          // 页面加载完成后执行，否则无法获取到dom
          this.$nextTick(() => {
            // if（aa!=null&&aa!=""）
            if (this.formMemberFamily.icoPath){
              /// 对图片进行处理，回显
              // 要先清空，在传入，否则会报key重复
              this.$refs.memberFamilyIcoImages.upload.fileList.splice(0, this.$refs.memberFamilyIcoImages.upload.fileList.length)
              let poster = {name: this.formMemberFamily.userName, url: this.formMemberFamily.icoPath, uid: this.formMemberFamily.id}
              // 先清空，否则可能数据污染
              this.$refs.memberFamilyIcoImages.upload.fileList = []
              this.$refs.memberFamilyIcoImages.upload.fileList.push(poster)
              this.$refs.memberFamilyIcoImages.uploadHide()
            }
          })

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.init()
      this.$store.commit('navigationListChange', ['家庭管理', '个人信息'])
    },
  }
</script>

<style scoped>


</style>
